<script>
import * as echarts from 'echarts'
export default {
  created() {
    this.getStatistics();
  },
  mounted() {
    this.echartsInit() // 调用echarts的初始方法
    this.select_tb()
  },
  data() {
    return {
      res_data: {},
      option:{},
      chart: null,
      tb_data: [],
      myCharts:null
    }
  },
  methods: {
        // 查询图表数据
    echartsInit() {
      this.myCharts = echarts.init(this.$refs.r_box)
    },
    updateData(){
      const allData = this.tb_data.map((item)=>{
        const a = {"name":item.orderName,"value":item.countSum};
        return a;
      })
      this.option = {
        title: {
          // 标题
          text: '鲜花销售情况',
          left: 'center', // 居中
          textStyle: {
            fontSize: 30,
          },
        },
        tooltip: {
          // 选中时会弹出一个子菜单
          trigger: 'item', // 设置触发的方式
        },
        legend: {
          orient: 'horizontal', // 设置朝向  vertical 这个是垂直的 horizontal 水平的
          left: 'center',
          bottom: 'bottom',
        },
        series: [
          {
            name: '销售数量',
            type: 'pie',
            radius: '70%',
            data: allData,
            // labelLine: {}, // 设置连接线
            emphasis: {
              // 让选中的部分显得更加突出 就好像加了一个阴影一样
              itemStyle: {
                shadowBlur: 10, // 阴影范围
                shadowOffsetX: 0, // 偏移量
                shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色和透明度
              },
            },
          },
        ],
      }
      this.myCharts.setOption(this.option)
      this.chart = this.myCharts;
    },
    // 获取商户数据、订单数、商品数、金额等
    async getStatistics() {
      const {data : res} = await this.$http.get("/flower-statistics/getStatistics?userId="+localStorage.getItem("userId"));
      this.res_data = res.data;
    },
    // 给echarts中的data传输数据
    async select_tb() {
        const {data : res} = await this.$http.get('/flower-statistics/select?userId='+localStorage.getItem("userId"));
        this.tb_data = res.data;
        if(this.tb_data.length == 0){
          const b = {"orderName":"默认数据","countSum":100}
          this.tb_data.push(b)
        }
        this.updateData();
    }
  },
}
</script>
<template>
  <div class="app">
    <div class="left_box">
      <ul>
        <li>
          <img src="../image/jine.png" alt="" />
          <h2>${{ res_data.merchantTotal }}</h2>
          <span>总销售额</span>
        </li>
        <li>
          <img src="../image/wodekucun.png" alt="" />
          <h2>${{ res_data.merchantPrice }}</h2>
          <span>库存金额</span>
        </li>
        <li>
          <img src="../image/shangpin.png" alt="" />
          <h2>{{res_data.goodsCount}}</h2>
          <span>商品总数</span>
        </li>
        <li>
          <img src="../image/dingdan.png" alt="" />
          <h2>{{res_data.orderCount}}</h2>
          <span>订单总数</span>
        </li>
      </ul>
    </div>
    <div class="rigth_box" ref="r_box"></div>
  </div>
</template>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #000;
}
li {
  list-style-type: none; // 去掉前面的无序标识
}
.app {
  position: relative;
  .left_box {
    width: 490px;
    height: 700px;
    background-color: #fff;
    padding-top: 48px;
    ul li {
      position: relative;
      height: 130px;
      width: 300px;
      background-color: #ffe;
      margin-bottom: 30px;
      margin-left: 95px;
      padding-top: 45px;
      padding-left: 50px;
      border: 1px solid #999;
      border-radius: 10px;
      img {
        position: absolute;
        left: 30px;
        top: 30px;
        width: 70px;
        height: 70px;
      }
      span {
        font-size: 14px;
      }
    }
  }
  .rigth_box {
    position: absolute;
    top: 0;
    right: 0;
    width: 700px;
    height: 700px;
    padding-top: 30px;
    padding-bottom: 60px;
    font-size: 25px;
    background-color: #fff;
  }
}
</style>
